<template>
	<view class="content poRel">
		<view style="height: 20rpx;"></view>
		<view class="wid90 mar borRad20 bacFFF"
			style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);height: 245rpx;">
			<view class="wid90 mar">
				<view style="height: 40rpx;"></view>
				<textarea class="wid90 mar foSi25" style="height: 100rpx;" v-model="infos"
					placeholder-style="color: #7F7F7F;" @input="infosInput"
					placeholder="粘贴整段地址，自动识别姓名、电话和地址；例：小王，13345678999，XX省XX市XX区XX街道XXX小区。" />
				<view class="dis mar-top30" style="justify-content: flex-end;">
					<view class="dis disAl disJuC borRad40 coFFF foSi25" @click="paste()"
						style="width: 168rpx;height: 50rpx;background-color: #37BCC3;">粘贴并识别</view>
				</view>
			</view>
		</view>
		<view class="wid90 mar borRad20 bacFFF mar-top30"
			style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);padding: 10rpx 0;">
			<view class="wid90 mar dis disAl disJuB" style="height: 96rpx;">
				<view class="foSi30 ">姓名</view>
				<input class="foSi25" style="text-align: right;" v-model="name" placeholder="请输入姓名"
					placeholder-style="color: #737373;" />
			</view>
			<view class="wid100" style="height: 1rpx;border-bottom: 1rpx dashed #E1DFDF;"></view>
			<view class="wid90 mar dis disAl disJuB" style="height: 96rpx;">
				<view class="foSi30 ">手机号</view>
				<input class="foSi25" style="text-align: right;" v-model="phone" type="number" placeholder="请输入手机号"
					placeholder-style="color: #737373;" />
			</view>
			<view class="wid100" style="height: 1rpx;border-bottom: 1rpx dashed #E1DFDF;"></view>
			<view class="wid90 mar dis disAl disJuB" style="height: 96rpx;">
				<view class="foSi30 ">省市区</view>
				<picker mode="region" :value="provinceName" @change="provincialChange">
					<view class="dis disAl foSi25">
						<view v-if="!provinceName" class="mar-right10" style="color: #737373;">请选择省市区</view>
						<view v-if="provinceName" class="mar-right10">{{provinceName}}</view>
						<uni-icons type="right" size="35rpx"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="wid100" style="height: 1rpx;border-bottom: 1rpx dashed #E1DFDF;"></view>
			<view class="wid90 mar dis disAl disJuB" style="height: 96rpx;">
				<view class="foSi30 ">详细地址</view>
				<view class="dis disAl">
					<input class="foSi25 mar-right10" style="text-align: right;" v-model="address" placeholder="详细到门牌号"
						placeholder-style="color: #737373;" />
					<uni-icons type="location" size="35rpx" color="#37BCC3"></uni-icons>
				</view>
			</view>
			<view class="wid100" style="height: 1rpx;border-bottom: 1rpx dashed #E1DFDF;"></view>
			<view class="wid90 mar dis disAl" style="height: 96rpx;" @click="xuan = !xuan">
				<view v-if="xuan" class="dis disAl disJuC borRad50"
					style="width: 26rpx;height: 26rpx;border: 4rpx solid #37BCC3;">
					<view class="borRad50" style="width: 10rpx;height: 10rpx;background-color: #37BCC3;"></view>
				</view>
				<view v-if="!xuan" class="dis disAl disJuC borRad50"
					style="width: 26rpx;height: 26rpx;border: 4rpx solid #818181;"></view>
				<view class="mar-left20 foSi25">设为默认</view>
			</view>
		</view>
		<view style="height: 140rpx;"></view>
		<view class="poFix wid100 dis disAl disJuC bacFFF" style="height: 124rpx;">
			<view class="hei80 dis disAl disJuC borRad40 coFFF foSi35 fowe600" @click="addEdit()"
				style="width: 450rpx;background: #37BCC3;">保存</view>
		</view>
	</view>
</template>

<script>
	import AddressParse from 'address-parse';
	export default {
		data() {
			return {
				url: this.global.url,
				timer: null,
				xuan: false,
				id: '',
				name: '',
				phone: '',
				address: '',
				province: '',
				city: '',
				district: '',
				provinceName: '',
				infos: ''
			}
		},
		onLoad(option) {
			console.log(option.item)
			if(option.item){
				var item = JSON.parse(option.item)
				this.name = item.name
				this.phone = item.phone
				this.address = item.content
				this.provinceName = item.address
				this.id = item.id
				this.xuan = item.is_default == 0?false:true
			}
		},
		methods: {
			addEdit(){
				var that = this;
				if(!that.name){
					return uni.showToast({title: "请输入姓名",icon: 'error',duration: 2000})
				}
				if(!that.phone){
					return uni.showToast({title: "请输入手机号",icon: 'error',duration: 2000})
				}
				if(!that.provinceName){
					return uni.showToast({title: "请选择地址",icon: 'error',duration: 2000})
				}
				if(!that.address){
					return uni.showToast({title: "请输入详细地址",icon: 'error',duration: 2000})
				}
				if(!that.id){
					that.add()
				}else{
					that.edit()
				}
			},
			edit(){
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_address_upd',
					method: 'POST',
					header: {
						'site-id': that.global.site_id,
						"token": uni.getStorageSync('token'),
					},
					data: {
						name: that.name,
						phone: that.phone,
						address: that.provinceName,
						content: that.address,
						is_default: that.xuan?1:0,
						id: that.id
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							uni.navigateBack(1)
						}
					}
				});
			},
			add(){
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_address_add',
					method: 'POST',
					header: {
						'site-id': that.global.site_id,
						"token": uni.getStorageSync('token'),
					},
					data: {
						name: that.name,
						phone: that.phone,
						address: that.provinceName,
						content: that.address,
						is_default: that.xuan?1:0
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							uni.navigateBack(1)
						}
					}
				});
			},
			// 粘贴
			paste() {
				uni.getClipboardData({
					success: (res) => {
						this.infos = res.data
						this.autoParse()
					}
				});
			},
			//点击识别收货信息
			autoParse() {
				var that = this
				if (!this.infos) {
					return uni.showToast({
						title: '请粘贴您需要识别的信息',
						icon: 'none'
					})
				}
				const infos = this.infos
				const result = AddressParse.parse(infos)[0]
				console.log('打印一下获取到的信息', result)
				if (result.name != '') {
					that.name = result.name
				}
				if (result.mobile != '') {
					that.phone = result.mobile
				}
				if (result.province != '') {
					that.province = result.province //省
				}
				if (result.city != '') {
					that.city = result.city //市
				}
				if (result.area != '') {
					that.area = result.area //区
				}
				if (result.details != '') {
					that.address = result.details //详细地址
				}
				console.log('打印一下addr', that.address)
				if (result.province != '') {
					that.provinceName = result.province + '' + result.city + '' + result.area
				}
			},
			infosInput: function(event) {
				var that = this
				if (that.timer !== null) clearTimeout(that.timer)
				that.timer = setTimeout(() => {
					that.infos = event.target.value
					console.log(that.infos)
					if(that.infos){
						that.autoParse()
					}
				}, 1000)
			},
			// 获取省市区
			provincialChange(e) {
				this.province = e.detail.value[0];
				this.city = e.detail.value[1];
				this.district = e.detail.value[2];
				this.provinceName = e.detail.value[0] + '' + e.detail.value[1] + '' + e.detail.value[2];
				console.log(this.provinceName)
			},
			shuanchu(index) {
				this.list.splice(index, 1);
			},
			xuanClick(item) {
				if (this.xuan != item.id) {
					this.xuan = item.id
				}
			},
			lower(e) {
				if (this.last_page > this.page) {
					this.page++
					this.getList()
				}
			},
			getList() {
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_address_upd',
					method: 'POST',
					header: {
						'site-id': that.global.site_id
					},
					data: {
						name: item.name,
						phone: item.phone,
						address: item.address,
						content: item.content,
						is_default: 1,
						id: item.id
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {}
					}
				});
			},
			tiaozhuan(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {}
</style>